<template>
  <div class="msg-all-contain">
    <div class="msg-board-title">留言板</div>
    <div class="msg-board">
      <div class="msg-board-contain">
        <div class="msg-head">
          <img v-if="userAvatar" :src="userAvatar" alt="" />
          <img v-else :src="require('@/assets/images/user.png')" alt="" />
          <textarea
            type="textarea"
            :class="inputStatusClass"
            placeholder="请输入内容..."
            ref="input"
            v-model="newComment"
            cols="60"
            rows="5"
          >
          </textarea>
          <button @click="submit">发表</button>
        </div>
        <div class="msg-content">
          <comments-child
            :comments="comments"
            :count="layerCount"
          ></comments-child>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommentsChild from "@/components/MessageBoard/MessageBoardChild.vue";
import dayjs from "dayjs";
export default {
  name: "commentsMessage",
  data () {
    return {
      // 评论列表
      comments: [],
      // 新评论
      newComment: "",
      // 用户头像
      userAvatar: "",
      // 非空判断
      hasNoConent: false,
      // 输入栏状态
      inputStatusClass: "",
      // 计数
      layerCount: 0,
    };
  },
  created () { },
  mounted () {
    this.initData();
  },
  components: {
    "comments-child": CommentsChild,
  },
  methods: {
    // 提交
    submit () {
      var self = this;
      // 提交信息非空验证
      if (!self.newComment || self.newComment === "") {
        self.hasNoConent = true;
        self.inputStatusClass = "no-content-warn";
        return;
      }
      self.inputStatusClass = "";

      // 生成comment对象
      var comment = {
        // 父评论Id
        parentId: "",
        // 评论内容
        text: self.newComment,
        // 发送者id
        senderId: "1",
        // 接收者id
        receiverId: "",
        // 发送时间
        postDate: dayjs().format("YYYY-MM-DD HH:mm"),
        // 发送者头像
        senderAvatar: "",
        // 子评论
        children: [],
        // 发送者姓名
        senderName: "Wendy",
        // comment id
        id: "",
        // 点赞
        likes: 0
      };

      // 新添加的评论插入数组最前面
      self.comments.unshift(comment);
      // 清空评论内容
      self.newComment = "";
    },
    initData () {
      var self = this;
      self.getComments();
    },
    // 获取数据
    getComments () {
      var self = this;
      // 这是自己伪造的数据
      // 要根据接口要求进行修改
      // self.comments = [
      //   {
      //     children: [
      //       {
      //         parentId: "55824b1c",
      //         text: "回复信息",
      //         senderId: "25d85a0f",
      //         receiverId: "25d85a0f",
      //         postDate: "2022-08-05 12:10",
      //         senderAvatar: "",
      //         children: [],
      //         senderName: "Wendy",
      //         id: "f0e3a81b",
      //         likes: 0,
      //         receiverName: "Irene",
      //         receiverAvatar: "",
      //       },
      //     ],
      //     id: "55824b1c",
      //     postDate: "2022-08-05 8:09",
      //     senderName: "Wendy",
      //     senderAvatar: "",
      //     receiverName: null,
      //     receiverAvatar: null,
      //     parentId: null,
      //     text: "测试信息",
      //     senderId: "25d85a0f",
      //     receiverId: null,
      //     likes: 0,
      //   },
      // ];
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 评论头像 */
.msg-head img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: absolute;
  top: 22px;
  left: 13px;
}
.msg-all-contain {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.msg-board-contain {
  letter-spacing: 1px;
  padding: 0 10px;
}

/* 信息栏标题 */
.msg-board-title {
  width: auto;
  text-align: center;
  font-size: 28px;
  font-weight: 300;
  margin: 0 0 1.8rem 0;
  min-height: 20px;
  color: #000 !important;
  font-family: "Lato", Verdana, sans-serif !important;
}
.msg-head {
  background-color: rgb(248, 248, 248);
  position: relative;
  height: 130px;
  border-radius: 5px;
}

/* 评论输入 */
.msg-head textarea {
  position: absolute;
  top: 13px;
  left: 85px;
  max-height: 60px;
  border-radius: 5px;
  outline: none;
  width: calc(100% - 200px);
  font-size: 16px;
  padding: 20px;
  border: 2px solid #f8f8f8;
  resize: none;
}
/* 发布评论按钮 */
.msg-head button {
  position: absolute;
  top: 13px;
  right: 20px;
  width: 70px;
  height: 40px;
  border: 0;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 500;
  color: #fff !important;
  background-color: #00a1d6;
  transition: 0.1s;
  cursor: pointer;
  letter-spacing: 2px;
}
/* 鼠标经过字体加粗 */
.msg-head button:hover {
  /*font-weight: 600;*/
}

.msg-content {
  overflow-y: auto;
}

/* 评论内容区域 */
.msg-content .child-comment {
  display: flex;
  position: relative;
  padding: 18px 10px 18px 10px;
}

@media (max-width: 900px) {
  .msg-head img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 22px;
    left: 13px;
  }
  .msg-head textarea {
    position: absolute;
    top: 13px;
    left: 70px;
    height: 55px;
    border-radius: 5px;
    outline: none;
    width: calc(100% - 200px);
    font-size: 15px;
    padding: 10px;
    border: 2px solid #f8f8f8;
    resize: none;
  }
  .msg-head button {
    position: absolute;
    top: 13px;
    right: 16px;
    width: 80px;
    height: 77px;
    border: 0;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #fff !important;
    background-color: #00a1d6;
    transition: 0.1s;
    cursor: pointer;
    letter-spacing: 2px;
  }
}
</style>